<template>
    <div class="table-box-popup">
        <div class="table-box-popup-header" v-if="props.showToolbar">
            <div class="popup-header-left">
                <slot name="headerLeft">
                    <!-- 搜索框部分 -->
                    <search-list :searchColumns="props.searchColumns" v-show="isShowSearch" @search-change="handleSearch" />
                </slot>
            </div>
            <div class="popup-header-right">
                <slot name="headerRight"></slot>
            </div>
        </div>
        <!-- 表格部分 -->
        <div class="table-box-popup-content">
            <el-table :data="props.tableData.length > 0 ? props.tableData : dataList" :border="border" height="100%"
                row-key="id" ref="multipleTableRef" :stripe="props.stripe" :highlightCurrentRow="isHighlightCurrentRow"
                @row-click="rowClickChange" v-loading="!props.api ? props.showLoading : loading"
                @selection-change="handleSelectionChange" @current-change="handleRadioChange">
                <el-table-column type="selection" align="center" v-if="!isHighlightCurrentRow && isMultiple"
                    width="80"></el-table-column>
                <el-table-column type="index" label="序号" width="80" align="center"
                    v-if="!isMultiple && showIndex"></el-table-column>
                <template v-for="(item, index) in props.tableColumns" :key="item.prop">
                    <el-table-column :prop="item.prop" :label="item.title" :align="item.align" :width="item.width"
                        :fixed="item.fixed" v-if="item.showColumn" :sortable="item.sortable" show-overflow-tooltip>
                        <template v-slot:default="scope">
                            <!-- 传递当前行的值和索引给具名插槽 -->
                            <slot :name="item.prop" :row="scope.row" :index="scope.$index"> {{ scope.row[item.prop] }}
                            </slot>
                        </template>
                    </el-table-column>
                </template>
                <!-- 操作 /更多 -->
                <el-table-column :fixed="props.moreOperations.fixed" :label="props.moreOperations.title"
                    v-if="props.showOperations" :width="props.moreOperations.width" :align="props.moreOperations.align">
                    <template v-slot:default="scope">
                        <slot name="moreColumn" :row="scope.row" :index="scope.$index"></slot>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script  setup>
import { ElMessage } from 'element-plus'
import searchList from "@/components/zt-small-tools/search-list.vue"

const formData = ref({}) // 表单数据对象
const multipleTableRef = ref()
const isShowSearch = ref(true)
// 事件
const emit = defineEmits(['size-change', 'current-change', 'page-change', 'row-click', 'multiple-choice', 'search-change', 'reset', 'refresh', 'radio-change'])

const props = defineProps({
    // 接口
    api: {
        type: Function,
    },
    // 自定义的form表单  有的字段需要默认传递 就用此配置
    paramForm: {
        type: Object,
        default: () => { }
    },

    // 数据列表
    tableData: {
        type: Array,
        default: () => []
    },
    // 表格列
    tableColumns: {
        type: Array,
        default: () => []
    },
    // 搜索表单列表
    searchColumns: {
        type: Object,
        default: () => []
    },

    // 表格是否带边框
    border: {
        type: Boolean,
        default: true
    },
   
    // 是否显示下标
    showIndex: {
        type: Boolean,
        default: true
    },
    // 是否多选 默认关闭 跟行单选只能一个为true
    isMultiple: {
        type: Boolean,
        default: false
    },
    // 是否开启点击行选中数据
    isClickRow: {
        type: Boolean,
        default: false
    },

    // 是否需要显示底部分页  默认开启
    showPagination: {
        type: Boolean,
        default: true
    },
    // 是否开启操作列
    showOperations: {
        type: Boolean,
        default: true
    },

    // 更多操作列
    moreOperations: {
        type: Object,
        default: () => {
            return {
                title: '操作', //标题
                align: 'center',//居中方式
                width: '120px',//宽度
                fixed: 'right',//固定定位方向
            }
        }
    },
    // 表格标题名称
    tableTitle: {
        type: String,
        default: document.title || '标题'
    },

    // 是否为斑马纹 table
    stripe: {
        type: Boolean,
        default: true
    },
    //行点击 单选
    isHighlightCurrentRow: {
        type: Boolean,
        default: false
    },

    // 是否显示表格上面的工具栏 不要轻易传递false 否则会导致一整排过去都无法显示
    showToolbar: {
        type: Boolean,
        default: true
    },

    // 表格开启显示加载
    showLoading: {
        type: Boolean,
        default: false
    },
    // 是否开启表格加载
    isTableLoading: {
        type: Boolean,
        default: true
    },
})

const multipleSelection = ref([])
// 行点击事件
async function rowClickChange(row) {
    // 开启行点击选中时生效
    if (props.isClickRow) {
        multipleTableRef.value.toggleRowSelection(row)
    }
    emit('row-click', row)
}

// 选中事件
async function handleSelectionChange(val) {
    multipleSelection.value = val
    // 多选 选中后的数据导出
    emit('multiple-choice', val)
    // console.log(multipleSelection.value)
}

// 清空选中的数据
async function clearSelection() {
    multipleTableRef.value.clearSelection()
}


// 搜索表单查询按钮
async function handleSearch(e) {
   // 判断是否传入接口
   if (props.api) {
        formData.value = e
        getApiData()
    } else {
        formData.value = e
        emit('search-change', formData.value)
    }
}

// 单选模式 数据选中事件
async function handleRadioChange(e) {
    emit('radio-change', toRaw(e))
}

const dataList = ref([])
// 加载状态
const loading = ref(false)
// 请求数据
function getApiData() {
    // 判断是否传入接口 没有传入则不执行
    if (!props.api) return

    // 判断传入的接口是不是一个字符串 
    if (typeof (props.api) == 'string') return ElMessage.warning('请传递正确的接口')
    // 判断是否开启了表格加载
    if (props.isTableLoading) {
        loading.value = true
    }
    props.api({
        ...formData.value,
        ...props.paramForm
    },).then(res => {
        dataList.value = res.data
        emit('get-data', res)
    }).finally(() => {
        loading.value = false
    })
}

// 重新加载
function reload() {
    getApiData()
}

getApiData()

// 导出方法  开启了setup 方法需要导出
defineExpose({
    reload
});


</script>

<style lang='scss' scoped>
.table-box-popup {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;

    .table-box-popup-header {
        display: flex;
        // align-items: center;
        justify-content: space-between;

        .popup-header-left {
            flex: 1;
            margin-bottom: 10px
        }

        .popup-header-right {
            margin-left: 20px
        }
    }

    .table-box-popup-content {
        flex: 1;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;

        box-sizing: border-box;
        border-radius: 5px;


        .table-box-popup-content-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
    }

    .table-box-popup-content::-webkit-scrollbar {
        width: 0px !important;
        height: 0px;
    }

    .table-box-popup-footer {
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 1rem;
    }
}
</style>
<style lang="scss">
.table-box-popup {
    .table-box-popup-search {
        .el-form {
            .el-form-item__content {
                .el-input__wrapper {
                    width: 100%;
                }
            }
        }
    }
}
</style>